<template>
  <el-aside width="208px" height="auto">
    <el-menu
      :default-active="onRoutes()"
      background-color="#fff"
      text-color="#5E7391"
      active-text-color="#fff"
      unique-opened
      router
    >
      <div v-for="(item, index) in menus" :key="index">
        <div v-if="item.subItems">
          <el-sub-menu :index="item.path">
            <template #title>
              <p class="icon"></p>
              <span>权限配置</span>
            </template>
            <el-menu-item :index="ite.path" v-for="(ite, idx) in item.subItems" :key="idx">{{
              ite.title
            }}</el-menu-item>
          </el-sub-menu>
        </div>
        <div v-else>
          <el-menu-item :key="index" :index="item.path">
            <p class="img"></p>
            <span>{{ item.title }}</span>
            <p class="tips">{{ store.state.unprocessNum }}</p>
          </el-menu-item>
        </div>
      </div>
    </el-menu>
  </el-aside>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const menus = ref([
  {
    title: '申请管理',
    path: '/applyManage',
  },
  {
    title: '权限配置',
    path: '/permissionManage',

    subItems: [
      {
        title: '权限管理',
        path: '/permissionManage',
      },
      {
        title: '配置管理',
        path: '/configManage',
      },
    ],
  },
]);
const router = useRouter();
const store = useStore();
const unprocessNum = ref<Number>(store.state.unprocessNum);
const userInfo = JSON.parse(localStorage.getItem('userInfo'));

const onRoutes = () => router.currentRoute.value.fullPath;

watch(
  () => store.getters.unprocessNum,
  (newVal) => {
    unprocessNum.value = newVal;
  },
);

// 获取未处理数
const getUnprocessNum = () => {
  store.dispatch('getUnprocessNum');
};

onMounted(() => {
  getUnprocessNum();
  if (userInfo.role_name !== '超级管理员') {
    menus.value.splice(1, 1);
  }
});
</script>
<style lang="scss" scoped>
.el-menu {
  height: 100%;
  margin-top: 50px;
  border: none;
  .el-menu-item {
    padding-left: 27px !important;
    padding: 0;
    margin: 0 10px;
    box-sizing: border-box;
    &.is-active {
      background: #307de5;
      border-radius: 2px;
      box-shadow: 0px 5px 11px 0px rgba(17, 130, 251, 0.37);
      color: #ffffff;
    }
    &:hover {
      background: rgba(48, 125, 229, 0.2);
      color: #5e7391;
    }
  }
  &:deep(.el-sub-menu__title) {
    padding: 0;
    padding-left: 37px !important;
    box-sizing: border-box;
  }
  &:deep(.el-sub-menu__icon-arrow) {
    position: static;
    margin-top: 2px;
    margin-left: 20px;
  }
  &:deep(.el-menu-item) {
    &:hover {
      background: #307de5;
      color: #fff;
    }
  }
  .el-sub-menu {
    .el-menu-item {
      padding-left: 69px !important;
    }
  }

  .el-menu-item {
    .img {
      width: 30px;
      height: 30px;
      background: url(@/assets/img/apply/icon_1.png);
      background-size: 100%;
      margin-right: 12px;
    }
  }
  .is-active {
    .img {
      background: url(@/assets/img/apply/icon_3.png);
      background-size: 100%;
    }
  }
  .icon {
    width: 30px;
    height: 30px;
    background: url(@/assets/img/apply/icon_2.png);
    background-size: 100%;
    margin-right: 12px;
  }

  .tips {
    margin: 0;
    padding: 2px;
    background: #ff5d3e;
    margin-left: 26px;
    border-radius: 50%;
    line-height: 16px;
    text-align: center;
    color: #fff;
  }
}
</style>
